import { ShapeFlags } from "@vue/shared";
import { createAppApi } from "./apiCreateApp"
import { createComponentInstance, setupComponent } from "./component";

/**
 * 渲染器，vue3 中用户可以重写不同的渲染器适配不同的平台
 * 创建一个渲染器
 */
export function createRender(renderOptions) {

  const setupRenderEffect = (instance) => {
    // 执行用户编写 setup 返回的函数执行
    instance.render();
  }
  const mountComponent = (initialVNode, container) => {
    // console.log(initialVNode, container);
    // 调用用户的 setup 函数执行，取得返回值，获取 render 函数返回的结果来进行渲染
    // 1. 创建实例
    const instance = initialVNode.component = createComponentInstance(initialVNode);
    // 2. 把数据解析到实例上
    setupComponent(instance);
    // 3. 创建一个 effect 让用户的setup返回的函数执行返回 render 函数执行
    setupRenderEffect(instance);
  }

  const processComponent = (n1, n2, container) => {
    if (n1 == null) { // 组件没有上一次的虚拟 DOM
      mountComponent(n2, container);
    } else {
      // 组件更新流程
    }
  }

  /**
   * 
   * @param n1 旧虚拟 DOM
   * @param n2 新虚拟 DOM
   * @param container 容器
   */
  const patch = (n1, n2, container) => {
    const { shapeFlag } = n2;
    if (shapeFlag & ShapeFlags.ELEMENT) {
      console.log('元素');
    } else if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
      // console.log('组件');
      processComponent(n1, n2, container);
    }

  }
  const render = (vnode, container) => {
    // runtime-core 的核心
    patch(null, vnode, container);
  }
  return {
    createApp: createAppApi(render)
  }
 }